<template>
    <el-row>
        <el-col :span="24" class="lmain" style="position: relative;">
            <ul class="background">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="sd" style=" height: 700px; width: 70%; border-radius: 10px 60px 10px 60px;
        overflow: hidden;
        box-shadow: 
        0 20px 40px rgba(15, 117, 254, 0.4),
        0 12px 20px rgba(41, 205, 217, 0.3),
        0 30px 60px rgba(135, 206, 235, 0.2),
        inset 0 4px 6px rgba(255, 255, 255, 0.15);
 ">
                <el-row>
                    <el-col :span="16">
                        <el-carousel height="360px" class="carousel-section">
                            <el-carousel-item v-for="(item, i) in [p1, p2, p3]" :key="i">
                                <img :src="item" style="height: 100%;width: 100%;" class="carousel-image" alt="轮播图" />
                            </el-carousel-item>
                        </el-carousel>
                        <div
                            style="width: 100%;height:600px; background: #fff; position: relative;padding: 10px 20px; padding-top: 30px; box-sizing: border-box;display: flex;justify-content: center;">
            
                            <div class="company-info">
                     
                                <div class="description">
                                    <p style="text-indent: 2em;">
                                        广东康斐尔净化科技有限公司始运营于2014年，注册资本1068w。公司位于中国珠三角洲经济腹地，广东省东莞市，本公司是一家集研发，制造，设计，生产，安装服务，销售为一体的洁净环境设备。主要生产供应：FFU/EFU
                                        净化过滤单元，高效送风口，高效过滤器，洁净棚，传递窗，货淋室，无尘工作台等。
                                        我们产品广泛应用：工业，商业和家用包括洁净医疗，生命科学（制药），食品与饮料，核电，微电子，新能源锂电，生物安全实验室，半导体，液晶显示，化学，航天，汽车，印刷等行业领域。

                                        康斐尔是空气过滤设备和洁净空气解决方案在生产和研发领域的世界领先者。

                                        康斐尔的产品已广泛应用于许多客户的洁净车间内，丰富的案例经验使康斐尔更加了解客户的深度需求，并能够针对性地定制最优解决方案。</p>





                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div
                            style="width: 100%;height: 80%;position: relative;padding: 40px 30px;box-sizing: border-box; background:#ebf2fc;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                            <div style="display: flex;align-items: flex-end;width: 90%;">
                                <div style="font-size: 1.6vw;font-weight: 800;">欢迎登录</div>
                                <div style="font-size: .9vw;margin-left: 10px;margin-bottom: 2px;">{{ bhname }}</div>
                            </div>

                            <el-form :inline="false" label-position="top" style="width: 80%;margin-top: 40px;"
                                :model="formData">
                                <el-form-item label="账号">
                                    <el-input @keyup.enter="Ilogin" v-model="formData.username" placeholder="账号"
                                        clearable />
                                </el-form-item>
                                <el-form-item label="密码">
                                    <el-input @keyup.enter="Ilogin" v-model="formData.password" type="password"
                                        placeholder="密码" show-password clearable />
                                </el-form-item>
                                <el-form-item label="验证码">
                                    <div style="display: flex;width: 100%; justify-content: space-between;">
                                        <el-input @keyup.enter="Ilogin" v-model="formData.vcode" placeholder="验证码"
                                            style="width:calc(100% - 6vw)" clearable />
                                        <VerifyCode @click="getRandomCode()" :key="rmath" :identifyCode="rmath">
                                        </VerifyCode>
                                    </div>

                                </el-form-item>
                                <el-form-item>
                                    <el-checkbox v-model="checked">记住密码</el-checkbox>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="Ilogin" block type="primary"
                                        style="width: 100%; margin: 20px auto;">登录</el-button>
                                </el-form-item>
                            </el-form>
                        </div>

                    </el-col>
                </el-row>
            </div>
        </el-col>
    </el-row>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { resetAble } from '@/composable/reset';
import { login, auth } from "@/api/login"
import { ElMessage } from 'element-plus';
import storage from '@/utils/storage';
import { useRouter } from 'vue-router';
import VerifyCode from '@/components/verifyCode.vue';
import p1 from "@/assets/img/webp/p1.webp";
import p2 from "@/assets/img/webp/p2.webp";
import p3 from "@/assets/img/webp/p3.webp";
const router = useRouter()
const checked = ref(true)

const handleClick = () => {
    reset()
}

const Iauth = () => {
    auth().then((res: any) => {
        if (res?.code == 200) {
            // ElMessage.success('用户已登录')
            router.push('/layout')
        }
    }).catch((err: any) => {
        console.log(err, 'err')
    })
}
const { data: formData, reset } = resetAble({
    username: "",
    password: "",
    vcode: ""
} as any)
const rmath = ref<any>('')
const getRandomCode = () => {

    rmath.value = Math.random().toString(36).slice(-4)
}
const bhname = ref("")
const init = () => {
    bhname.value = import.meta.env.VITE_NAME
    if (import.meta.env.MODE == 'development') {
        formData.value.username = 17516211205
        formData.value.password = 111
        formData.value.vcode = "2333"
        rmath.value = "2333"

    } else {
        getRandomCode()
    }
    if (storage.get('checked')) {
        checked.value = storage.get('checked')
        formData.value.username = storage.get('username')
        formData.value.password = window.atob(storage.get('password'))
    }
    // activeName.value = +storage.get('activeName') || 0
    Iauth()
}
init()

const Ilogin = async () => {

    if (formData.value.vcode == rmath.value) {
        getRandomCode()
        let res = await login(formData.value) as any
        if (res) {
            router.push('/layout')
            const { token, refreshToken, userinfo } = res.data
            storage.set('token', token)
            storage.set('refreshToken', refreshToken)
            storage.set('userinfo', userinfo)
            ElMessage.success(res.message)

            if (checked.value) {
                storage.set('checked', checked.value)
                storage.set('username', formData.value.username)
                storage.set('password', window.btoa(formData.value.password))
            } else {
                storage.deleteKey('checked')
                storage.deleteKey('username')
                storage.deleteKey('password')
            }
            handleClick()
        }

    } else {
        ElMessage.error('验证码错误')

    }


}
</script>
<style lang="scss" scoped>
.lmain {
    width: 100vw;
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    background: rgb(15, 117, 254);
    background: linear-gradient(90deg, rgba(15, 117, 254, 1) 0%, rgba(41, 205, 217, 0.8352591036414566) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: #4e54c8;
    overflow: hidden;
}

.background li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 10s linear infinite;
}




.background li:nth-child(0) {
    left: 27%;
    width: 80px;
    height: 80px;
    bottom: -80px;
    animation-delay: 1s;
}

.background li:nth-child(1) {
    left: 22%;
    width: 112px;
    height: 112px;
    bottom: -112px;
    animation-delay: 5s;
}

.background li:nth-child(2) {
    left: 62%;
    width: 125px;
    height: 125px;
    bottom: -125px;
    animation-delay: 7s;
}

.background li:nth-child(3) {
    left: 47%;
    width: 115px;
    height: 115px;
    bottom: -115px;
    animation-delay: 2s;
}

.background li:nth-child(4) {
    left: 32%;
    width: 160px;
    height: 160px;
    bottom: -160px;
    animation-delay: 9s;
}

.background li:nth-child(5) {
    left: 33%;
    width: 126px;
    height: 126px;
    bottom: -126px;
    animation-delay: 24s;
}

.background li:nth-child(6) {
    left: 62%;
    width: 64px;
    height: 64px;
    bottom: -64px;
    animation-delay: 7s;
}

.background li:nth-child(7) {
    left: 46%;
    width: 180px;
    height: 180px;
    bottom: -180px;
    animation-delay: 32s;
}

.background li:nth-child(8) {
    left: 52%;
    width: 98px;
    height: 98px;
    bottom: -98px;
    animation-delay: 35s;
}

.background li:nth-child(9) {
    left: 67%;
    width: 134px;
    height: 134px;
    bottom: -134px;
    animation-delay: 34s;
}

.background li:nth-child(10) {
    left: 70%;
    width: 152px;
    height: 152px;
    bottom: -152px;
    animation-delay: 36s;
}

.background li:nth-child(11) {
    left: 16%;
    width: 76px;
    height: 76px;
    bottom: -76px;
    animation-delay: 25s;
}

.background li:nth-child(12) {
    left: 49%;
    width: 113px;
    height: 113px;
    bottom: -113px;
    animation-delay: 24s;
}

.background li:nth-child(13) {
    left: 22%;
    width: 171px;
    height: 171px;
    bottom: -171px;
    animation-delay: 12s;
}

.background li:nth-child(14) {
    left: 74%;
    width: 89px;
    height: 89px;
    bottom: -89px;
    animation-delay: 24s;
}

.background li:nth-child(15) {
    left: 3%;
    width: 82px;
    height: 82px;
    bottom: -82px;
    animation-delay: 71s;
}

.background li:nth-child(16) {
    left: 11%;
    width: 167px;
    height: 167px;
    bottom: -167px;
    animation-delay: 8s;
}

.background li:nth-child(17) {
    left: 32%;
    width: 101px;
    height: 101px;
    bottom: -101px;
    animation-delay: 21s;
}

.background li:nth-child(18) {
    left: 76%;
    width: 172px;
    height: 172px;
    bottom: -172px;
    animation-delay: 84s;
}

.background li:nth-child(19) {
    left: 85%;
    width: 68px;
    height: 68px;
    bottom: -68px;
    animation-delay: 52s;
}

.background li:nth-child(20) {
    left: 87%;
    width: 106px;
    height: 106px;
    bottom: -106px;
    animation-delay: 39s;
}
</style>